<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px;">
            <div style="width: 755px;">
                <span  @click="() => router.push({ path: '/product' })" class="category-click">{{ ftitle }}</span>
                    <span> >{{ stitle}}</span>
                <div style="margin-top: 20px;">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="serial" label="产品编号" width="100" />
                        <el-table-column prop="title" label="产品名称" width="350" show-overflow-tooltip />
                        <el-table-column prop="package" label="产品包装" width="100" show-overflow-tooltip/>
                        <el-table-column prop="price" label="产品价格" width="80"/>
                        <el-table-column fixed="right" label="操作" width="80">
                            <template #default="scope">
                                <el-button link type="primary" size="small" @click="() => router.push({path: '/detail', query: {'id': scope.row.id}})">
                                    查看详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getProductBySecond } from "../requests/index";
const router = useRouter();
const route = useRoute();
const tableData = ref();
const ftitle = ref();
const stitle = ref();
const queryParam = ref(route.query.id || '');
const getSecondProduct = async (id) => {
    const res  =await getProductBySecond({"id": id});
    if (res.status){
        const data = res.data;
        tableData.value = data.data;
        ftitle.value = data.ftitle;
        stitle.value = data.stitle;
    }
};

getSecondProduct(queryParam.value);

watch(() => route.query.id, (newId, oldId) => {
  queryParam.value = newId;
  getSecondProduct(newId);
});


</script>

<style scoped>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
:deep(.el-table__header){
    font-size: 14px;
    font-weight: 800;
    color: "#333";
}

.category-click{
    cursor: pointer;
}
.category-click:hover{
    color: #bf471f;
}
</style>